<template>
  <view class="center-popup">
    <view class="popup-mask" :class="{ 'mask-show': show }" @click="onClickMask"></view>

    <view class="popup-layout" :class="layoutClassName">
      <image class="icon-close" :src="$oss('/common/close_white_o.png')" v-show="closeable" @click="close" />

      <view class="popup-body">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
import { computed } from 'vue'
import { usePopup } from '../hooks/popup'

export default {
  name: 'XuiCenterPopup',
  props: {
    // 是否显示 Popup
    // show: Boolean,

    // 是否显示关闭按钮
    closeable: Boolean,

    // 是否可以通过点击 mask 关闭
    closeOnClickMask: Boolean
  },
  emits: ['update:show', 'close', 'click-mask'],
  setup (props, { emit }) {
    const { show, open, close: popupClose } = usePopup()

    const layoutClassName = computed(() => {
      const className = []

      if (show.value) className.push('layout-show')

      return className
    })

    const close = () => {
      popupClose()
      // emit('update:show', false)
      emit('close')
    }
    const onClickMask = () => {
      if (props.closeOnClickMask) close()
      else emit('click-mask')
    }

    return {
      layoutClassName,
      show,
      open,
      close,
      onClickMask
    }
  }
}
</script>

<style lang="scss">
.center-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 1000;

  &.popup-show {
    visibility: visible;
  }

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;

    &.mask-show {
      visibility: visible;
      opacity: 1;
    }
  }

  .popup-layout {
    position: absolute;
    z-index: 1001;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    left: 50%;
    top: 50%;
    border-radius: 20rpx;
    transform: translate(-50%, -50%) scale(0);

    &.layout-show {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      visibility: visible;
    }

    .icon-close {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      bottom: -128rpx;
      left: 0;
      right: 0;
      z-index: 10;
      margin: 0 auto;
    }
  }
}
</style>
